<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0 maximum-scale=1, user-scalable=no"
        />
        <style>
            body {
                margin: 0;
                padding-bottom: 3rem;
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
                    Roboto, Helvetica, Arial, sans-serif;
            }

            #form {
                background: rgba(0, 0, 0, 0.15);
                padding: 0.25rem;
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                display: flex;
                height: 3rem;
                box-sizing: border-box;
                backdrop-filter: blur(10px);
            }
            #input {
                border: none;
                padding: 0 1rem;
                flex-grow: 1;
                border-radius: 2rem;
                margin: 0.25rem;
            }
            #input:focus {
                outline: none;
            }
            #nickname {
                border: none;
                padding: 0 1rem;
                border-radius: 2rem;
                margin: 0.25rem;
                width: 5em;
            }
            #nickname:focus {
                outline: none;
            }
            #form > button {
                background: #333;
                border: none;
                padding: 0 1rem;
                margin: 0.25rem;
                border-radius: 3px;
                outline: none;
                color: #fff;
            }

            #messages {
                list-style-type: none;
                margin: 0;
                padding: 0;
            }
            #messages > li {
                padding: 0.5rem 1rem;
            }
            #messages > li:nth-child(odd) {
                background: #efefef;
            }

            .notify {
                font-size: 12px;
                text-align: center;
                color: gray;
            }
        </style>
        <title>ChatRoom</title>
    </head>
    <body>
        <ul id="messages"></ul>
        <form action="" id="form">
            <input
                type="text"
                id="nickname"
                placeholder="我的昵称"
                autocomplete="off"
            />
            <input
                type="text"
                id="input"
                placeholder="说点儿什么吧..."
                autocomplete="off"
            />
            <button>Send</button>
        </form>

        <script src="/socket.io/socket.io.js"></script>
        <script>
            var socket = io();

            var nickname = document.getElementById('nickname');
            var messages = document.getElementById('messages');
            var form = document.getElementById('form');
            var input = document.getElementById('input');

            form.addEventListener('submit', (e) => {
                e.preventDefault();

                if (input.value) {
                    socket.emit('chat message', {
                        nickname: nickname.value,
                        msg: input.value,
                    });

                    addNewMessage('我: ' + input.value);

                    input.value = '';
                }
            });

            function addNewMessage(msg, cls) {
                var item = document.createElement('li');
                item.textContent = msg;
                if (cls) {
                    item.classList.add(cls);
                }

                messages.appendChild(item);
                window.scrollTo(0, document.body.scrollHeight);
            }

            socket.on('chat message', (val) => {
                addNewMessage((val.nickname || '匿名') + ': ' + val.msg);
            });

            socket.on('online', () => {
                addNewMessage('有人上线', 'notify');
            });

            socket.on('offline', () => {
                addNewMessage('有人下线', 'notify');
            });
        </script>
    </body>
</html>
